
<!DOCTYPE html>
<html>
<head>
	<title>market</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../css/userCenter.css">
	<link rel="stylesheet" href="../css/market.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/echarts.simple.min.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
	<div id="ma_head"></div>
	<div style="width: 100%;height: 2.15rem;"></div>
	<div class="block bOne">
		<ul class="blockList">
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
		</ul>
		<div class="fruit">
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>

			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
		</div>
	</div>

	<div class="block">
		<ul class="blockList">
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
		</ul>
		<div class="fruit">
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>

			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
		</div>
	</div>
	
	<div class="block">
		<ul class="blockList">
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
		</ul>
		<div class="fruit">
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>

			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
		</div>
	</div>


	<div class="block">
		<ul class="blockList">
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
			<li class="l">000025</li>
		</ul>
		<div class="fruit">
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>

			<dl class="fruitList l">
				<dt>
					<img src="../images/market/badanmu.png">
				</dt>
				<dd>
					桃子
				</dd>
			</dl>
		</div>
	</div>
	
	<div class="alert_zy">
		<div style="width: 100%;height: 2.15rem;"></div>
		
		<!--内容开始-->
		<div class="saleRose">
			<div class="saleImg">
				<img src="">
				<h1>0.01649</h1>
			</div>
			<div class="fudu">
				<p>涨额：<span>0.0003</span></p>
				<p>涨幅：<span>0.0003</span></p>
			</div>
		</div>
		<table class="saleTable">
			<tbody>
				<tr>
					<td>今开</td>
					<td>最低</td>
					<td>最高</td>
					<td>成交</td>
				</tr>
				<tr>
					<td>0.012</td>
					<td>0.231</td>
					<td>0.256</td>
					<td>01555</td>
				</tr>
			</tbody>
		</table>
		<form>
		<div class="selectCard">
			<div style="width: 100%; height:0.5rem;">
				<ul class="changeLi l">
					<li>分时</li>
					<li>日K</li>
				</ul>
				<!--<div class="auto_renew right">
					<input type="checkbox"/>
					<span>自动刷新</span>
				</div>-->
			</div>
			<div style="width: 6.26rem; height:6rem;">
				<div class="cardItem">
					<div id="echart"></div>
				</div>
				<div class="cardItem" style="display: none;">
					<!--<div id="echart"></div>-->
				</div>
			</div>
		</div>
		<table class="fruitTable" cellpadding="0" cellspacing="0" border="1">
			<tr>
				<td>苹果</td>
				<td>香蕉</td>
				<td>西瓜</td>
				<td>草莓</td>
				<td>桃子</td>
				<td>荔枝</td>
			</tr>
			<tr>
				<td>苹果</td>
				<td>香蕉</td>
				<td>西瓜</td>
				<td>草莓</td>
				<td>桃子</td>
				<td>荔枝</td>
			</tr>
		</table>
		<button class="fanhuiBtn">返回农场</button>
		<div class="productDes">
			<span>产品：</span>
			<span>种子</span>
			<span>现价</span>
			<span>0.0215</span>
			<span>涨停</span>
			<span>0.0164</span>
			<span>跌停</span>
			<span>0.0164</span>
		</div>
		<div class="buy">
			<h2 class="maiTitle">买入</h2>
			<div class="inputStyle">
				<span class="allType l">买入价格</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="inputStyle">
				<span class="allType l">卖出数量</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="inputStyle">
				<span class="allType l">总计金币</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="fee">
				<p class="left">持有量：<span>0.119</span></p>
				<p class="right">手续费：<span>0.119</span>金币</p>
			</div>
			<button class="buyBtn">限价买入</button>
		</div>


		<div class="buy sell">
			<h2 class="maiTitle">卖出</h2>
			<div class="inputStyle">
				<span class="allType l">卖出价格</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="inputStyle">
				<span class="allType l">卖出数量</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="inputStyle">
				<span class="allType l">总计金币</span>
				<input type="text" placeholder="0.0168" class="ipt">
				<span class="rightPart">金币</span>
			</div>
			<div class="fee">
				<p class="left">持有量：<span>0.119</span></p>
				<p class="right">手续费：<span>0.119</span>金币</p>
			</div>
			<button class="buyBtn">限价卖出</button>
		</div>
		</form>
		<h2 class="table_h2">委托信息</h2>
		<table class="messTable">
			<thead>
				<tr>
					<th>买/卖</th>
					<th>价格</th>
					<th>委托量</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>卖四</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>卖三</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>卖二</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>卖一</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>买四</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>买三</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>买二</td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>买一</td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>


		<h2 class="table_h2">当前委托<span class="right renew">[刷新]</span></h2>
		<table class="messTable">
			<thead>
				<tr>
					<th>委托时间</th>
					<th>产品</th>
					<th>类型</th>
					<th>价格</th>
					<th>委托量</th>
					<th>已成交</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td  colspan="9">没有查到任何数据</td>
				</tr>
			</tbody>
		</table>

		<h2 class="table_h2">当前委托<span class="right renew">[刷新]</span></h2>
		<table class="messTable">
			<thead>
				<tr>
					<th>委托时间</th>
					<th>产品</th>
					<th>类型</th>
					<th>价格</th>
					<th>委托量</th>
					<th>已成交</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="8">没有查到任何数据</td>
				</tr>
			</tbody>
		</table>
		<div class="wenxinshow">
			<p class="coinP">温馨提示:</p>
			<p class="coinP">1.交易数量以整百倍进行交易</p>
			<p class="coinP">2.果实出售手续费1%</p>
			<p class="coinP">3.领取推广大礼包后，需将农场等级提升四级后方可在淘金果园出售种子和果实</p>
		</div>
		<!--内容结束-->
		
		<div style="width: 100%;height: 1.8rem;"></div>
	</div>
	
	
	
	<div style="width: 100%;height: 1.8rem;" class="heheda"></div>
	<div id="ma_foot">
		<img src="../images/market/fanhuinongchang.png" class="fanhui">
	</div>
	
	
	
	
</body>
<script>
	$(function(){
        var zyW=$(".cardItem").width();
        var zyH=$(".cardItem").height();
        $("#echart").css("width",zyW)
        $("#echart").css("height",zyH)
		
		// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'));
option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    grid: {
        left: '1%',
        right: '9%',
        bottom: '3%',
		top:'3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['4.3','4.4','4.5','4.6','4.7','4.8','4.9'],
            splitLine:{
               show: true,
               lineStyle: {
                //   虚线
                   type: 'dashed' 
                }
                
            }
        }
    ],
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine:{
        	show: false
        }
    },
    label: {
            normal: {
                show: true,
                position: 'top'
            }
     },
     textStyle: {
            fontSize: 10
                   // 主标题文字颜色
    },
    series : [
        {
            name:'邮件营销',
            type:'line',
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#ff795d'
                        //线条颜色
                    }  
                }  
            }, 
            // 是否堆叠
            stack: '总量',
            // 区域颜色
            areaStyle: {normal: {color:'#fcedd6'}},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'#8bcdf0'
                        //线条颜色
                    }  
                }  
            }, 
            data:[220, 182, 191, 234, 290, 330, 310]
        },
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var browser = {
		versions: function () {
			var u = navigator.userAgent, app = navigator.appVersion;
			return {//<a href="http://www.suchso.com/productdesign/sharemobileappproductdesign.html" class="keylink" title=" 移动" target="_blank">移动</a>终端浏览器版本信息 
				trident: u.indexOf('Trident') > -1, //IE内核
				presto: u.indexOf('Presto') > -1, //opera内核
				webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
				gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
				mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
				iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
				iPad: u.indexOf('iPad') > -1, //是否iPad
				webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
			}; 
		}(), 
		language: (navigator.browserLanguage || navigator.language).toLowerCase() 
	}        
	//document.writeln("语言版本: "+browser.language);
	//document.writeln(" 是否为移动终端: "+browser.versions.mobile);
	//document.writeln(" ios终端: "+browser.versions.ios);
	//document.writeln(" android终端: "+browser.versions.android);
	//document.writeln(" 是否为iPhone: "+browser.versions.iPhone);
	//document.writeln(" 是否iPad: "+browser.versions.iPad);
	//document.writeln(navigator.userAgent);

		
	})
</script>
</html>